<template>
  <el-upload
    v-model:file-list="list"
    :action="'api'+API.FILE_UPLOAD"
    :limit="limit"
    :before-upload="beforeUpload"
    :accept="accept"
    class="file-upload"
    :on-success="successHandle"
    :on-change="changeHandle"
  >
    <el-button type="primary">
      点击上传
    </el-button>
    <template #tip>
      <div class="el-upload__tip">
        仅支持pdf格式
      </div>
    </template>
  </el-upload>
</template>
<script  setup>
import { ref } from 'vue'
import API from '@api/api'
import { ElMessage  } from 'element-plus';
const emit = defineEmits('update:modelValue')
const props = defineProps({
    modelValue:{
        type:Array,
        default:()=>[]
    },
    limit:{
        type:[Number,String],
        default:1

    },
    accept:{
        type:String,
        default:'.pdf'

    }
  
})

  
  
const list = ref(props.modelValue)


const beforeUpload = (file)=>{
    if(file.type!=='application/pdf'){
        ElMessage({
            message:'文件格式不合法',
            type:'warning'
        })
        return false
    }
    
}

const successHandle=(resp,file)=>{
    Object.assign(file,resp.data)
}

const changeHandle=(file,fileList)=>{
    if(file.status==='success'){
        const emitInfo = fileList.map(f=>{
            const {groupId,name,docId}=f
            return{groupId,name,docId}
        })
        emit('update:modelValue',emitInfo)
    }

}




</script>

<style lang="scss" scoped>
.file-upload{

  .el-upload__tip{
    display: inline-block;
    margin-left: 24px;
  
  }
}
</style>
  